<template>
	<view >
		<view class="img">
			<tki-qrcode
			ref="qrcode"
			cid="1000"
			:val="val"
			:size="size"
			:unit="unit"
			:background="background"
			:foreground="foreground"
			:pdground="pdground"
			:icon="icon"
			:iconSize="iconsize"
			:lv="lv" 
			:onval="onval"
			:loadMake="loadMake"
			:usingComponents="usingComponents"
			:showLoading="showLoading"
			:loadingText="loadingText"
			@result="qrR" />
		</view>
		<view class="imst">
			<text style="color: #fff;">请截图保存，使用云闪付扫码支付</text>
			
		</view>
	</view>
	
	
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'

	export default {
		data() {
			return {
				val: '生成二维码内容', //要生成二维码的值
				size: 500, // 二维码的大小 单位为rpx
				background: '#ffffff', //背景色
				foreground: '#000000',
				pdground: '#000000', //角标色
				icon: '', //二维码图标
				iconsize: 30, //二维码图标大小
				lv: 3, //二维码容错级别
				onval: true, //val值变化时自动重新生成二维码
				unit: 'upx',
				loadMake: true, //组件加载完成后自动生成二维码
				src: '',
				usingComponents:true,
				showLoading: true, //loading
				loadingText: 'loading内容', //loading内容
				title: 'Hello'
			}
		},
		components: {
			tkiQrcode
		},
		onLoad(e) {
			this.val = e.url
		},
		methods: {
			qrR() {
				console.log("二维码生成")
			}
		}
	}
</script>

<style>
	.img{
		display: flex;
		justify-content:space-around;
		margin: 100rpx auto;
		width: 500rpx;
		height: 500rpx;
		
	}
	.imst{
		display: flex;
		justify-content:space-around;
	}
</style>